<template>
<div>
  <template>
    <component
      :is="activeName"
      :tel="tel"
      :key="key"
      :field = "field"
      :callProvince="callProvince"
      :callCity="callCity"
      :cid="cid"
      @addCustomerSuccess="addCustomerSuccess"
      @mergeCustomerSuccess="mergeCustomerSuccess"></component>
  </template>
</div>
</template>
<script>
  // 此组件是来电合并&&添加客户初始化加载
  import CallSummary from './CallSummary.vue'
  import CdrMergeCustomer from './CdrMergeCustomer'
  import CdrAddCustomer from './CdrAddCustomer'
  import bus from '@/store/eventBus'
  export default {
    name: 'OutBoundSummaryAyna',
    data () {
      return {
        activeName: 'CdrAddCustomer',
        callInfo: null,
        tel: '',
        custType: '',
        callProvince: '',
        callCity: '',
        cid: '',
        field: '',
        currentRouter: [],
        popIframe: false,
        key: 0
      }
    },
    computed: {
    },
    components: {
      CallSummary,
      CdrMergeCustomer,
      CdrAddCustomer
    },
    methods: {
      initComponent () { // 初始化加载组件
        if (this.custType === 'unk') { // 未知客户
          this.activeName = CdrAddCustomer
          this.callProvince = this.callInfo.PROVINCE
          this.callCity = this.callInfo.DISTRICT
          this.tel = this.callInfo.CALLED_NO
        } else if (this.custType === 'one') { // 定位到1个客户
          this.activeName = CallSummary
          this.cid = this.callInfo.CUSTOMER_ID
        } else if (this.custType === 'multi') { // 定位到多个客户
          this.activeName = CdrMergeCustomer
          this.field = 'phone'
          this.callProvince = this.callInfo.PROVINCE
          this.callCity = this.callInfo.DISTRICT
          this.tel = this.callInfo.CALLED_NO
        }
        this.key = this.$route.path.split('/')[4]
      },
      addCustomerSuccess (flag) {
        if (flag) {
          this.fetchData()
        }
      },
      mergeCustomerSuccess (flag) {
        if (flag) {
          this.fetchData()
        }
      },
      fetchData () {
        let callSheetId = this.$route.params.id
        let callInfo = null
        let localList = []
        let sessionList = window.sessionStorage.getItem('callOutList')
        if (sessionList && sessionList !== 'undefined') {
          localList = JSON.parse(sessionList)
        }
        if (!localList || localList === 'undefined') {
          localList = []
        }
        let list = this.$store.state.call.callList.cdr_outbound.list || localList
        // 判断是否有通话id相关的详情
        for (let i = 0; i < list.length; i++) {
          if (list[i]._id === callSheetId) {
            callInfo = list[i]
          }
        }
        if (callInfo) {
          this.callInfo = callInfo
          this.custType = callInfo.CUSTOMER_TYPE
          this.initComponent() // 初始化加载客户组件
        }
        this.$store.commit('IS_CALL_OUT_INTERFACE', {status: true}) // 是否要显示iframe组件
      }
    },
    watch: {
      $route (to, form) {
        if (to.path.split('/')[3] === 'cdr_outbound' && to.params.id) {
          this.fetchData()
        }
      }
    },
    created () {
      bus.$on('updateOutboundRight', (msg) => {
        this.fetchData()
      })
      this.fetchData()
    },
    beforeDestroy () {
      bus.$off('updateOutboundRight')
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
.compoent-none
  display none
.compoent-active
  display block
.iframe-wrap
  height calc(100vh - 54px)
iframe
  height 100%
  width 100%
.new-window-text
  color $c-prompt
  text-align center
  font-size 20px
  line-height calc(100vh - 54px)
</style>

